﻿/// <reference path="../jquery-1.4.4.js" />
/// <reference path="../jquery-1.4.4-vsdoc.js" />

/*!  
** Copyright (c) 2011 Ray Liang (http://www.dotnetage.com)
** Dual licensed under the MIT and GPL licenses:
** http://www.opensource.org/licenses/mit-license.php
** http://www.gnu.org/licenses/gpl.html
** 
**----------------------------------------------------------------
** title        : DJME ColorPicker
** version   : 2.0.1
** modified: 2010-2-13
** depends:
**    jquery.ui.core.js
**    jquery.ui.widget.js
**    jquery.farbtastic.js
**   dropdownable.js
**----------------------------------------------------------------
*/

(function ($) {
    $.widget("ui.colorpicker", {
        options: {
            dropdown: false,
            showClear: true,
            allowInput: true,
            imgUrl: null,
            clientClick: null,
            value: "#ffffff"
        },
        _create: function () {
            var self = this, el = this.element;
            el.addClass("d-colorpicker");
            if (this.options.clientClick)
                el.bind(this.widgetEventPrefix + "clientClick", this.options.clientClick);

            var palette = $("<div/>").addClass("d-colorpicker-palette-holder")
                                                  .appendTo(el);

            var pl = $("<span/>").addClass("d-colorpicker-palette")
                                             .appendTo(palette);

            $("<input value='#ffffff'/>").addClass("d-colorpicker-name")
                                                       .appendTo(palette);

            var cls = $("<span/>").addClass("d-colorpicker-clear")
                                              .attr("title", "No color")
                                              .appendTo(palette);

            var far = $("<div/>").addClass("farbtastic")
                                           .appendTo(el);

            far.farbtastic($(">input", palette));
            far.css({ "top": "0px" });

            $(">input", palette).bind(($.browser.msie ? "onpropertychanged" : "DOMAttrModified"), function () {
                pl.css({
                    "background-color": $(this).val()
                });
                self.options.value = $(this).val();
                self.element.trigger(self.widgetEventPrefix + "clientClick", { value: $(this).val() });
            });

            if (this.options.showClear) {
                cls.click(function (event) {
                    event.stopPropagation();
                    $(">input", palette).val("#ffffff");
                    pl.css({ "background-color": "#ffffff" });
                });
            }
            else
                cls.hide();

            if (this.options.dropdown) {
                var $dc = $("<div/>").addClass("d-colorpicker-button").insertBefore(this.element)
                , $pl = null;

                if (this.options.imgUrl) {
                    $pl = $("<img alt=''/>").addClass("d-colorpicker-palette")
                                                        .attr("src", this.options.imgUrl)
                                                        .appendTo($dc);
                }
                else {
                    $pl = pl.clone().appendTo($dc);
                }

                $pl.click(function () {
                    self.element.trigger(self.widgetEventPrefix + "clientClick", { value: $(">input", palette).val() });
                });

                $("<span/>").addClass("d-colorpicker-icon")
                             .appendTo($dc)
                             .click(function (event) {
                                 event.stopPropagation();
                                 if (!el.hasClass("d-state-open"))
                                     el.dropdownable("open");
                                 else
                                     el.dropdownable("close");
                             });

                this.element.dropdownable({
                    target: $dc,
                    closed: function () {
                        $pl.css("background-color", $(">input", palette).val());
                    }
                });
            }
        },
        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        }
    });

})(jQuery);   